<template>
  <el-card>
    <!-- 面包屑 -->
    <my-bread level1="商品管理" level2="商品分类"></my-bread>
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="24" class="searchArea">
        <el-button type="success" @click="addGoodsCate()">添加分类</el-button>
      </el-col>
    </el-row>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="form.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        {{selectedOptionns}}
        <!-- 级联选择器 (表单元素) -->
        <el-form-item label="分类" label-width="120px">
          <el-cascader
            props.expandTrigger='hover'
            props.checkStrictly
            clearable
            :options="caslist"
            v-model="selectedOptionns"
            :props="defaultProp"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取消</el-button>
        <el-button type="primary" @click="addCate()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" height="470">
      <!-- treeKey > nodeKey  > 节点唯一标识 id
          parentKey > 父节点的id
          levelKey  >  当前节点的级别
          childKey  > 子节点
     -->
      <el-tree-grid
        prop="cat_name"
        label="分类名称"
        treeKey="cat_id"
        parentKey="cat_pid"
        levelKey="cat_level"
        childKey="children"
      >
      </el-tree-grid>
      <el-table-column label="级别">
        <template slot-scope="scope">
          <span v-if="scope.row.cat_level === 0">一级</span>
          <span v-else-if="scope.row.cat_level === 1">二级</span>
          <span v-else-if="scope.row.cat_level === 2">三级</span>
        </template>
      </el-table-column>

      <el-table-column label="是否有效">
        <template slot-scope="scope">
          <span v-if="scope.row.cat_deleted === false">有效</span>
          <span v-else-if="scope.row.cat_deleted === true">无效</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-edit"
            circle
            @click="showEditdia(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            size="mini"
            plain
            type="danger"
            icon="el-icon-delete"
            circle
            @click="showDelefirm(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 4. 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="8"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-card>
</template>
<script>
// 引入elment-tree-grid
var ElTreeGrid = require("element-tree-grid");
export default {
  components: {
    // 组件名<el-tree-grid>
    ElTreeGrid,
  },
  data() {
    return {
      list: [],
      dialogFormVisibleAdd: false,
      form: {
        cat_pid: -1,
        cat_name: "",
        cat_level: -1,
      },
      selectedOptionns:[],
      caslist: [],
      defaultProp: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //   分页相关的数据
      total: -1,
      pagenum: 1,
      pagesize: 8,
    };
  },
  created() {
    this.getGoodsCate();
  },
  methods: {
    // 确定按钮 添加分类  发送请求
    async addCate() {
      // cat_pid:-1,
      // cat_name:'',
      // cat_level:-1
      // 一级分类 selectedOptionns.length === 0 cat_pid cat_level =0
      // 二级分类 selectedOptionns.length === 1 cat_pid=selectedOptionns[0] cat_level =1
      // 三级分类 selectedOptionns.length === 2 cat_pid=selectedOptionns[1] cat_level =2
      if (this.selectedOptionns.length === 0) {
        this.form.cat_pid = 0;
        this.form.cat_level = 0;
      } else if (this.selectedOptionns.length === 1) {
        this.form.cat_pid = this.selectedOptionns[0];
        this.form.cat_level = 1;
      } else if (this.selectedOptionns.length === 2) {
        this.form.cat_pid = this.selectedOptionns[1];
        this.form.cat_level = 2;
      }
      const res = await this.$http.post(`categories`,this.form);
      //  更新视图
      this.getGoodsCate();

      // 关闭对话框
      this.dialogFormVisibleAdd = false;
      // 清空form
      this.form = {};
    },
    // 添加分类按钮 显示对话框
    async addGoodsCate() {
      // 获取二级分类的数据
      const res = await this.$http.get(`categories?type=2`);
      this.caslist = res.data.data;
      this.dialogFormVisibleAdd = true;
    },
    async getGoodsCate() {
      const res = await this.$http.get(
        `categories?type=3&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
      );
      this.list = res.data.data.result;
      this.total = res.data.data.total;
    },
    // 分页用的
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.pagenum = 1;
      this.getGoodsCate();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.getGoodsCate();
    },
    // 操作按钮
    // 编辑
    showEditdia() {},
    // 删除
    showDelefirm() {},
  },
};
</script>

<style>
.searchArea {
  margin-top: 20px;
}
.table {
  margin-top: 20px;
}
</style>